<template>
	<view class='cu-modal bottom-modal' @click='close' :class='{show: show}'>
		<view class='modal' @click.stop>
			<view class='search mb-20 position-relative' style="z-index: 999999;">
				<searchInput @skipSearch="skipSearch" :isSkipBtn="true" v-model='searchVal' bg='gray' placeholder='请输入企业名称' @input='handleInput' 
					@search='handleSearch'>
				</searchInput>
			</view>
			<!-- :class='{active: item.checked}' -->
			<view class='acc-item'  v-for='(item,index) in list' :key="index">
				<!-- <image class='photo' :src='item.avatar || userImg'></image> -->
				<view class='name'>{{item.name}}</view>
				<!-- v-if='!item.checked' -->
				<view  @click="changeCompany(item)" class='change'>
					<text>{{btn}}</text>
					<image class='icon' src='/static/my/change.png'></image>
				</view>
			</view>
			<view class="mt-40" v-if="!list.length">
				<data-null text="请搜索企业" v-if="!list.length && !isClick"></data-null>
				<data-null text="暂无数据" v-else></data-null>
			</view>
			<!-- <view @click="to(`/pages/login/login`)" class='acc-item' >
				<view class='add'>
					<text class='cuIcon-roundclose'></text>
				</view>
				<view class='name'>登录其他账号</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {getCompanyList} from "@/api/user/login.js"
	import searchInput from '@/components/search-input/input2'
	export default {
		components:{
			searchInput
		},
		props:{
			btn:{
				type:String,
				default:'切换'
			}
		},
		data() {
			return {
				isClick:false,
				searchVal:'',
				show: false,
				userImg:require("@/static/logo.png"),
				list: [
					
				],
				user:{},
			}
		},
		methods: {
			skipSearch(){
				this.$emit('back', '-1')
				this.close()
			},
			handleInput(){
				
			},
			handleSearch(item) {
				if(!this.searchVal){
					uni.showToast({
						title:"请输入企业名称",
						icon:"none"
					})
					return
				}
				this.isClick = true
				this.companyList()
			},
			open(list) {
				// if(!list){
				// 	this.user = uni.getStorageSync('user') || {}
				// 	this.companyList()
				// }else{
				// 	this.list = list
				// }
				this.show = true;
			},
			companyList(){
				getCompanyList({name:this.searchVal}).then(res=>{
					this.list = res.map(item=>{
						item.checked = item.companyId == this.user.companyId?true:false
						return item
					})
				})
			},
			changeCompany(item){
				this.$emit('back', item.id)
				this.close()
				// let data = {
				// 	id: item.id,
				// 	companyId: item.companyId,
				// 	userId: item.userId
				// }
				// switchCompanyLogin(data).then(res=>{
				// 	if(res){
				// 		this.close()
				// 		uni.setStorageSync('token',res.access_token)
				// 		uni.setStorageSync('mchId', item.companyId)
				// 		this.$emit('back')
				// 		uni.$emit('changeCompany')
				// 	}
				// })
			},
			to(url){
				uni.navigateTo({
					url:url
				})
			},
			close() {
				this.show = false;
			}
		} 
	}
</script>

<style scoped lang="scss">
	.modal {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 9;
		width: 100%;
		border-radius: 20rpx 20rpx 0px 0px;
		background: #FFFFFF;
		max-height: 1000rpx;
		overflow: auto;
		padding: 52rpx 22rpx;
		
		.acc-item {
			display: flex;
			align-items: center;
			height: 132rpx;
			border-radius: 8rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.1);
			color: #999;
			padding: 0 18rpx;
			margin-bottom: 24rpx;
			
			&.active {
				background: linear-gradient(90deg, #FFB862 0%, #FCA103 100%);
				box-shadow: 0px 2rpx 3rpx 0px #FFE1A7;
				color: #fff;
			}
			
			.photo {
				width: 80rpx;
				height: 80rpx;
				background-color: #999;
				border-radius: 50%;
			}
			
			.add {
				width: 80rpx;
				height: 80rpx;
				border-radius: 8rpx;
				background: #EEEEEE;
				color:  #BEBEBE;
				font-size: 42rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.cuIcon-roundclose {
					transform: rotate(45deg);
				}
			}
			
			.name {
				margin-left: 24rpx;
				font-size: 28rpx;
				max-width: 400rpx;
				color:#000
			}
			
			.change {
				margin-left: auto;
				display: flex;
				align-items: center;
				
				.icon {
					width: 30rpx;
					height: 30rpx;
					margin-left: 8rpx;
				}
			}
		}
	}
</style>